import React from 'react'
import PropTypes from 'prop-types'
import {Col, Form, Input} from "antd"

const FormItem = Form.Item

const ColProps = {
  xs: 6,
  sm: 6,
  style: {
    marginBottom: 6,
  },
}

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const Detail = ({
                  data,
                  form: {
                    getFieldDecorator,
                  },
                }) => {

  return (
    <Form layout="horizontal">
      <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        <FormItem {...formItemLayout} label="群聊名称">
          {getFieldDecorator('operatorWxId', {initialValue: data.chatroomName})(<Input disabled
          />)}
        </FormItem>
      </Col>
      <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        <FormItem {...formItemLayout} label="归属微信">
          {getFieldDecorator('empId', {initialValue: data.operatorWxId ? data.operatorWxId.wxNo || data.operatorWxId.wxId : undefined})(<Input
            disabled/>)}
        </FormItem>
      </Col>
      <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        <FormItem {...formItemLayout} label="归属微信昵称">
          {getFieldDecorator('reempid1', {initialValue: data.operatorWxId ? data.operatorWxId.remark || data.operatorWxId.nickname : undefined})(<Input
            disabled/>)}
        </FormItem>
      </Col>
      <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        <FormItem {...formItemLayout} label="归属员工">
          {getFieldDecorator('reempid', {initialValue: data.operatorWxId ? data.operatorWxId.belongEmpName ? data.operatorWxId.belongEmpName : '' : ''})(
            <Input disabled/>)}
        </FormItem>
      </Col>
    </Form>
  )
}


Detail.propTypes = {
  handleSubmit: PropTypes.func,
  handleFormReset: PropTypes.func,
  form: PropTypes.object,
}

export default Form.create()(Detail)
